<template>
	<view>


		<nav-bar :isSearch="false" :menuData="menuList" :isBack="false" @onback="onback">

			<template slot="title">
				<view> </view>
			</template>
			<template slot="content">设备地图</template>
		</nav-bar>


		<map id="mapId" class="map" @tap="tapMap" @markertap="tapMarker" :show-location="true" :scale="mapScale" :latitude="latitude"
		 :longitude="longitude" :markers="markers">

		</map>

		<!-- 以下是从底部滑出模态窗体-->
		<view class="bottom-popup cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog padding-xs">

				<view class="cover-header">

					<view class="icon iconfont icondingwei" @tap="moveToLocation">
					</view>



				</view>

				<view class="cover-body">


					<view class="item"><text>设备IMEI:</text>{{selectedMarker.imei}}</view>
					<view class="item"><text>详细地址: </text>{{selectedMarker.address}}</view>
					<view class="item"><text>报装时间: </text>{{selectedMarker.createTime}}</view>


				</view>

			</view>
		</view>


	</view>
</template>

<script>
	const app = getApp();

	import menuData from '../../mock/menu-data.js'
	import NavBar from '../component/NavBar'


	import {
		dateFormat
	} from '../../common/util.js';



	const iconPathPrefix = "../../static/map/jg/"
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				latitude: 39.0851,
				longitude: 117.19937,
				markers: [],
				modalName: null,
				menuList: menuData,
				selectedMarker: null,
				markerEvent: null,
				mapContext: null,
				mapScale: 12,

				selectedMarkerId: '',

				currMarkerIcon: '',


			}
		},
		components: {
			NavBar
		},
		onReady() {
			this.mapContext = uni.createMapContext('mapId', this);

			console.log(app.globalData.deviceInfoList)

			this.markers = this.builMarkers(app.globalData.deviceInfoList);
			this.mockTapMarker()

		},

		methods: {


			tapMap() {
				this.hideModal();
			},



			builMarkers(data) {
				let markers = [];
				data.map(item => {
					item.width = 35;
					item.height = 35;
					item.iconPath = iconPathPrefix + 'green.png'
					markers.push(item);

					this.longitude = item.longitude;
					this.latitude = item.latitude;
				})



				return markers;
			},


			tapMarker: function(e) {

				if (this.selectedMarker) {
					this.selectedMarker.iconPath = this.selectedMarker.iconPath.replace("-border", "")
				}
				
				this.markers.map(item => {
					
					

					if (item.id == e.markerId) {

						item.iconPath = item.iconPath.replace(".png", "-border.png")
						this.selectedMarker = item;
						this.latitude = item.latitude;
						this.longitude = item.longitude;
						this.showMarkerModal();


					}
				})




			},

			showMarkerModal() {
				this.modalName = 'bottomModal'
			},
			hideModal(e) {
				this.modalName = null
			},

			mockTapMarker() {
				if (this.selectedMarkerId) {

					let mockEvent = {
						
						markerId: this.selectedMarkerId,
						mp: {
							
						}
					};


					this.$nextTick(() => {
						this.tapMarker(mockEvent);
					})

				}
			},

			moveToLocation() {

				this.mapContext.moveToLocation(this.selectedMarker);
				this.mapScale = 12.8
			},


			initLocation() {

				let that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						if (res.longitude) {
							that.latitude = res.latitude;
							that.longitude = res.longitude;
						}

					}
				});
			},



		},

		onLoad(options) {

			this.initLocation();
			
			

			if (options.markerId) {
			
				this.selectedMarkerId = options.markerId;
			}


		}
	}
</script>

<style scoped lang="scss">
	$cover-header-height:80upx;
	$cover-body-height:300upx;

	$img-size:calc(100vw / 4 - 4px);

	.input {
		font-size: 35upx;
		background-color: rgba(255, 255, 255, 0.7);
		padding-left: 20upx;
		height: 70upx !important;
		color: $color-text-grey--dark;
	}

	.map {
		height: calc(100vh - #{$nav-bar-height});
		width: 100vw;
	}


	.cu-dialog {
		opacity: 0.6;
		background-color: $color-bg-primary;
	}

	.cover-header {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		color: $color-text-blue--light;


		.icon {
			font-size: 60upx;
			padding: 20upx;
		}

	}

	.cover-body {


		box-sizing: border-box;
		padding: 10upx;
		color: $color-text-white;
		font-size: 30upx;
		text-align: left;
		border-top: 1px solid $color-border-grey;
		height: $cover-body-height;

		.item {
			height: 80upx;
			line-height: 80upx;
		}

		text {
			font-weight: 600;
			padding: 10upx;
		}

	}


	.bottom-popup.cu-modal {
		top: calc(100vh - #{$cover-header-height} - #{$cover-body-height});
	}

	.drawer {
		top: $nav-bar-height;
		height:calc(100vh - #{$nav-bar-height});
	}

	.cu-dialog .cu-list .cu-item {
		color: $color-text-grey;
		background-color: $color-bg-primary;

		.content {
			padding-left: 10upx;
		}
	}
</style>
